/**
* @Author: zmx
* @Date: 2023/9/25
* @Description:
*/
<template>
  <div style="padding: 20px">
    <el-form :inline="true" :model="formInline">
      <el-form-item>
        <el-button type="primary" @click="addRiskTask">+ 新增任务</el-button>
      </el-form-item>
<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="batchAddRiskTask">+ 新增跨站任务</el-button>-->
<!--      </el-form-item>-->
      <el-form-item label="市选择">
        <el-select
          v-model="formInline.cityId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
          @change="changeCity"
        >
          <el-option
            v-for="item in optionsListCity"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="区选择" v-if="optionsListDist">
        <el-select
          v-model="formInline.districtId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
          @change="changeDist"
        >
          <el-option
            v-for="item in optionsListDist"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="站选择">
        <el-select
          v-model="formInline.stationId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
          @change="changeStation"
        >
          <el-option
            v-for="item in optionsListStation"
            :key="item.id"
            :label="item.staName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="桩选择">
        <el-select
          v-model="formInline.stakeId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in optionsListState"
            :key="item.id"
            :label="item.devName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="任务名称">
        <el-input v-model="formInline.jobName" placeholder="任务名称"></el-input>
      </el-form-item>
      <el-form-item label="对象类型">
        <el-select
          v-model="formInline.objectType"
          value-key="id"
          filterable
          clearable
        >
          <el-option
            v-for="item in optionsList"
            :key="item.id"
            :label="item.itemObjectName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="任务类型">
        <el-select
          v-model="formInline.jobType"
          value-key="id"
          filterable
          clearable
        >
          <el-option
            v-for="item in optionsJobType"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="任务状态">
        <el-select
          v-model="formInline.status"
          value-key="id"
          filterable
          clearable
        >
          <el-option
            v-for="item in optionsJobStatus"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#006175',color:'#fff'}">
      <el-table-column label="序号" width="50">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="cityName" label="市" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="districtName" label="区" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="stationName" label="站" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="stakeName" label="桩" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="jobName" label="任务名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="objectType" label="对象类型" v-if="optionsList">
        <template v-slot="scope">
          {{ getObjectType(scope.row.objectType) }}
        </template>
      </el-table-column>
      <el-table-column prop="jobType" label="任务类型" >
        <template v-slot="scope">
          <span v-if="scope.row.jobType === '0'">例行评估</span>
          <span v-if="scope.row.jobType === '1'">专项评估</span>
        </template>
      </el-table-column>
      <el-table-column prop="jobDesc" label="任务描述" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="jobRunTime" label="执行时间" min-width="200" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="jobPeriod" label="执行周期(天)"></el-table-column>
      <el-table-column prop="jobFrequency" label="执行次数(次)"></el-table-column>
      <el-table-column prop="status" label="任务状态" >
        <template v-slot="scope">
          <span v-if="scope.row.status === 0" style="color: rgba(245, 179, 27, 1)">待执行</span>
          <span v-if="scope.row.status === 1" style="color: rgba(0, 230, 92, 1)">执行中</span>
          <span v-if="scope.row.status === 2" style="color: rgba(0, 97, 117, 1)">已执行</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot="scope">
          <el-button class="common-btn" @click="detailTask(scope.row)">详情</el-button>
          <el-button class="common-btn" v-show="scope.row.status === 0" @click="doTask(scope.row)">执行</el-button>
          <el-button class="delete-btn" v-show="scope.row.status !== 1" @click="deleteTask(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      :page-size="formInline.pageSize"
      layout="total, sizes, pager, next, jumper"
      @current-change="refreshPageByCondition"
      @size-change="handleSizeChange"
      :current-page.sync="formInline.pageNumber"
      :total="total">
    </el-pagination>
    <riskTaskDialog v-if="ItemDialogShow"
      :ItemDialogShow="ItemDialogShow"
      :taskParam="taskParam"
      @closeDialog="closeDialog"
      @selectData="selectData"></riskTaskDialog>
    <batchTaskDialog v-if="BatchDialogShow"
      :BatchDialogShow="BatchDialogShow"
      @closeDialog="closeBatchDialog"
      @selectData="selectBatchData"></batchTaskDialog>
  </div>
</template>

<script>
import {updateRiskItem} from '../../api/risk/riskItem'
import {addRiskTask, deleteRiskTask, getRiskTaskQuery, riskTaskRun, batchAddRiskTask} from "../../api/risk/riskTask";
import riskTaskDialog from "./riskTaskDialog";
import batchTaskDialog from "./batchTaskDialog";
import {plan, warn} from "../../api/inspection/apiUntil";
import {getItemDictObject} from "../../api/risk/commonDict";
export default {
  components:{
    riskTaskDialog,
    batchTaskDialog
  },
  data() {
    return {
      optionsJobType:[
        {
          name:'专项评估',
          value:'1'
        },
        {
          name:'例行评估',
          value:'0'
        },
      ],
      optionsJobStatus:[
        {
          name:'待执行',
          value:'0'
        },
        {
          name:'执行中',
          value:'1'
        },
        {
          name:'已执行',
          value:'2'
        },
      ],
      optionsList:[],
      optionsListCity: [],
      optionsListDist: [],
      optionsListStation: [],
      optionsListState: [],
      tableData: [],
      formInline: {
        cityId: '',
        districtId: '',
        stationId: '',
        stakeId: '',
        taskName: '',
        jobType: '',
        objectType: '',
        status: '',
        pageSize: 10,
        pageNumber: 1
      },
      taskParam: {},
      total: 0,
      actionParam: {
        itemId: '',
        itemType: '',
        action: ''
      },
      ItemDialogShow: false,
      BatchDialogShow: false,
    };
  },
  mounted() {
    this.getInit()
    this.getPlanCity()
  },
  methods: {
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.getInit()
    },
    //城市列表
    getPlanCity() {
      plan.getPlanCity().then((res) => {
        this.optionsListCity = res.data
        this.initDist()
      })
    },
    changeCity() {
      this.formInline.districtId = ''
      this.initDist()
    },
    initDist() {
      if (this.optionsListCity && this.formInline.cityId) {
        this.optionsListDist = this.optionsListCity.find(city => city.id === this.formInline.cityId).children
      }
      if (this.formInline.districtId) {
        this.initStat()
      }
    },
    changeDist() {
      this.formInline.stationId = ''
      this.initStat()
    },
    initStat() {
      let params = {
        id: this.formInline.districtId
      }
      plan.getPlanStat(params).then((res) => {
        this.optionsListStation = res.data
        if (this.formInline.stationId) {
          this.changeStation()
        }
      })
    },
    changeStation() {
      let params = {
        id: this.formInline.stationId
      }
      warn.getWarnStake(params).then((res) => {
        this.optionsListState = res.data
      })
    },
    addRiskTask() {
      this.taskParam.type = 'add'
      this.taskParam.cityId = ''
      this.taskParam.districtId = ''
      this.taskParam.stationId = ''
      this.taskParam.stakeId = ''
      this.taskParam.jobName = ''
      this.taskParam.jobType = ''
      this.taskParam.objectType = ''
      this.taskParam.jobDesc = ''
      this.taskParam.modelId = ''
      this.taskParam.jobRunTime = ''
      this.taskParam.period = ''
      this.taskParam.jobFrequency = ''
      this.ItemDialogShow = true
    },
    batchAddRiskTask() {
      this.BatchDialogShow = true
    },
    reset() {
      this.formInline.jobName = ''
      this.formInline.cityId = ''
      this.formInline.districtId = ''
      this.formInline.stationId = ''
      this.formInline.stakeId = ''
      this.formInline.jobType = null
      this.formInline.objectType = null
      this.formInline.status = null
      this.refreshPageByCondition()
    },
    doTask(task){
      riskTaskRun({jobId:task.id}).then((res)=>{
        if(res && res.code === 200){
          this.$message({ message: '执行成功', type: 'success' })
          this.refreshPageByCondition()
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    },
    deleteTask(task) {
      this.$confirm('此操作将删除该任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRiskTask({jobId:task.id}).then((res)=>{
          if(res && res.code === 200){
            this.$message({ message: '删除成功', type: 'success' })
            this.refreshPageByCondition()
          }
        }).catch(err => {
          this.$message({ message: '服务器异常：' + err, type: 'warning' })
        })
      })
    },
    detailTask(task){
      this.taskParam.type = 'detail'
      this.showDialogWithParam(task)
    },
    showDialogWithParam(task) {
      this.taskParam.taskId = task.id
      this.taskParam.cityId = task.cityId
      this.taskParam.districtId = task.districtId
      this.taskParam.stationId = task.stationId
      this.taskParam.stakeId = task.stakeId
      this.taskParam.jobName = task.jobName
      this.taskParam.jobType = task.jobType
      this.taskParam.objectType = task.objectType
      this.taskParam.jobDesc = task.jobDesc
      this.taskParam.modelId = task.modelId
      this.taskParam.jobRunTime = task.jobRunTime
      this.taskParam.jobPeriod = task.jobPeriod
      this.taskParam.jobFrequency = task.jobFrequency
      this.ItemDialogShow = true
    },
    closeDialog() {
      this.ItemDialogShow = false
    },
    closeBatchDialog() {
      this.BatchDialogShow = false
    },
    selectData(val) {
      //监听“弹窗组件”返回的数据
      let params = {
        cityId: val.cityId,
        districtId: val.districtId,
        stationId: val.stationId,
        stakeId: val.stakeId,
        jobName: val.jobName,
        jobType: val.jobType,
        objectType: val.objectType,
        jobDesc: val.jobDesc,
        modelId: val.modelId,
        jobRunTime: val.jobRunTime,
        jobPeriod: val.jobPeriod,
        jobFrequency: val.jobFrequency,
      }
      if (val.type === 'add') {
        addRiskTask(params).then((res)=>{
          if(res && res.code === 200){
            this.$message({ message: '新增成功', type: 'success' })
            this.refreshPageByCondition()
          }
        }).catch(err => {
          this.$message({ message: '服务器异常：' + err, type: 'warning' })
        })
      } else if (val.type === 'edit') {
        params.taskId = val.taskId
        updateRiskItem(params).then((res)=>{
          if(res && res.code === 200){
            this.$message({ message: '更新成功', type: 'success' })
            this.refreshPageByCondition()
          }
        }).catch(err => {
          this.$message({ message: '服务器异常：' + err, type: 'warning' })
        })
      }
    },
    selectBatchData(val) {
      batchAddRiskTask(val).then((res)=>{
        if(res && res.code === 200){
          this.$message({ message: '新增成功', type: 'success' })
          this.refreshPageByCondition()
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    },
    getInit(){
      getItemDictObject().then((res)=>{
        if(res){
          this.optionsList = res
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
      this.refreshPageByInit()
    },
    getObjectType(type) {
      if (this.optionsList && this.optionsList.length > 0) {
        return this.optionsList.find(item => item.id === type).itemObjectName
      }
      return ''
    },
    search() {
      this.refreshPageByCondition()
    },
    refreshPageByInit() {
      this.refreshPage({page: this.formInline.pageNumber - 1,
        size: this.formInline.pageSize})
    },
    refreshPageByCondition() {
      let params = {
        jobName: this.formInline.jobName,
        cityId: this.formInline.cityId,
        districtId: this.formInline.districtId,
        stationId: this.formInline.stationId,
        stakeId: this.formInline.stakeId,
        jobType: this.formInline.jobType,
        objectType: this.formInline.objectType,
        status: this.formInline.status,
        source: 'web',
        page: this.formInline.pageNumber - 1,
        size: this.formInline.pageSize
      }
      this.refreshPage(params)
    },
    refreshPage(params) {
      getRiskTaskQuery(params).then((res)=>{
        if(res){
          this.tableData = res.taskList
          this.total = res.taskListSize
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    }
  }
};

</script>

<style scoped>

</style>
